<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯CSS名片卡片 - 前端学习实践</title>
  <style>
    /* 全局重置与基础设置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: linear-gradient(135deg, #daf1e2 0%, #b8e6c1 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: 'Microsoft YaHei', sans-serif;
      padding: 20px;
    }

    /* 页面标题 */
    .page-title {
      color: #2c3e50;
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 30px;
      text-align: center;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* 卡片容器样式 */
    .card {
      margin: 30px auto;
      width: 250px;
      height: 250px;
      background-color: #000;
      text-align: center;
      border-radius: 25px;
      padding-top: 35px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    /* 添加微妙的光泽效果 */
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      transition: left 0.5s;
    }

    .card:hover::before {
      left: 100%;
    }

    /* 头像图片样式 */
    .logo {
      margin-bottom: 20px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #daf1e2;
      transition: transform 0.3s ease;
    }

    .card:hover .logo {
      transform: scale(1.1);
    }

    /* 文字样式 */
    .writer {
      font: normal 700 20px 'Microsoft YaHei', sans-serif;
      color: #fff;
      text-align: center;
      margin-bottom: 10px;
      transition: color 0.3s ease;
    }

    .introduce {
      font: normal 700 12px 'Microsoft YaHei', sans-serif;
      color: #fff;
      text-align: center;
      opacity: 0.9;
      transition: opacity 0.3s ease;
    }

    /* 悬停效果 */
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

    .card:hover .writer {
      color: #daf1e2;
    }

    .card:hover .introduce {
      opacity: 1;
    }

    /* 多个卡片展示区域 */
    .cards-container {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      max-width: 1200px;
    }

    /* 不同主题的卡片 */
    .card.theme-blue {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .card.theme-green {
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }

    .card.theme-purple {
      background: linear-gradient(135deg, #8360c3 0%, #2ebf91 100%);
    }

    .card.theme-orange {
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    }

    /* 响应式设计 */
    @media (max-width: 600px) {
      .card {
        width: 200px;
        height: 200px;
        padding-top: 25px;
      }

      .logo {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
      }

      .writer {
        font-size: 18px;
      }

      .introduce {
        font-size: 10px;
      }

      .page-title {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .cards-container {
        gap: 20px;
      }
    }

    /* 技术说明区域 */
    .tech-info {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 15px;
      padding: 30px;
      margin-top: 40px;
      max-width: 800px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .tech-info h3 {
      color: #2c3e50;
      margin-bottom: 15px;
      font-size: 20px;
    }

    .tech-info p {
      color: #34495e;
      line-height: 1.6;
      margin-bottom: 10px;
    }

    .tech-info ul {
      color: #34495e;
      margin-left: 20px;
      line-height: 1.6;
    }

    /* 来源信息 */
    .source-info {
      margin-top: 30px;
      text-align: center;
      color: #7f8c8d;
      font-size: 14px;
    }

    .source-info a {
      color: #3498db;
      text-decoration: none;
    }

    .source-info a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
<h1 class="page-title">纯CSS名片卡片设计展示</h1>

<div class="cards-container">
  <!-- 原始黑色主题卡片 -->
  <div class="card">
    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face" alt="头像" class="logo">
    <p class="writer">OverThinker</p>
    <p class="introduce">欢迎来到我的博客</p>
  </div>

  <!-- 蓝色渐变主题 -->
  <div class="card theme-blue">
    <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face" alt="头像" class="logo">
    <p class="writer">前端开发者</p>
    <p class="introduce">创造美好的用户体验</p>
  </div>

  <!-- 绿色渐变主题 -->
  <div class="card theme-green">
    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face" alt="头像" class="logo">
    <p class="writer">UI设计师</p>
    <p class="introduce">设计改变世界</p>
  </div>

  <!-- 紫色渐变主题 -->
  <div class="card theme-purple">
    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face" alt="头像" class="logo">
    <p class="writer">产品经理</p>
    <p class="introduce">连接用户与技术</p>
  </div>
</div>

<div class="tech-info">
  <h3>🎨 设计特点</h3>
  <ul>
    <li><strong>视觉层次：</strong>通过字体大小差异创建清晰的视觉层次</li>
    <li><strong>高对比度：</strong>黑白配色确保最佳可读性</li>
    <li><strong>圆角设计：</strong>卡片和头像都使用圆角，营造友好现代感</li>
    <li><strong>精准间距：</strong>精心调整的内外边距使布局平衡</li>
    <li><strong>居中布局：</strong>所有内容居中对齐，形成视觉焦点</li>
  </ul>

  <h3>💡 技术要点</h3>
  <ul>
    <li><strong>CSS重置：</strong>使用*选择器统一浏览器默认样式</li>
    <li><strong>Flexbox布局：</strong>实现完美的水平垂直居中</li>
    <li><strong>CSS3过渡：</strong>添加平滑的悬停动画效果</li>
    <li><strong>响应式设计：</strong>媒体查询适配移动设备</li>
    <li><strong>渐变背景：</strong>使用linear-gradient创建现代感背景</li>
  </ul>

  <h3>🚀 扩展功能</h3>
  <p>本实现在原博客基础上增加了以下功能：</p>
  <ul>
    <li>多种主题色彩方案展示</li>
    <li>增强的悬停动画效果</li>
    <li>光泽扫过动画</li>
    <li>渐变背景优化</li>
    <li>更好的响应式适配</li>
  </ul>
</div>

<div class="source-info">
  <p>本文来源：<a href="https://blog.csdn.net/weixin_46491509/article/details/147769774" target="_blank">为了结合后端而学习前端的学习日志（1）——纯CSS静态卡片案例</a></p>
</div>
</body>
</html>